<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">

<head>

<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- This <head> section is only used for static prototyping purposes. At runtime, -->
<!-- Tiles will only use the body fragment defined with tiles:fragment="content",  -->
<!-- as specified at the corresponding views.xml file.                             -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<title>SAR: Sistema de Atención de Requerimientos</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" media="screen, projection"
	href="../static/styles/blueprint/screen.css" />

<link rel="stylesheet" type="text/css" media="print"
	href="../static/styles/blueprint/print.css" />

<link rel="stylesheet" type="text/css" media="screen" href="../static/styles/booking.css" />

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" th:src="@{/resources/demos/style.css}"/>
<script>
  $(function() {  
    $( "#from" ).datepicker({
      dateFormat: "dd/mm/yy",
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      dateFormat: "dd/mm/yy",
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
</script>

<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->
<!-- Some styles and scripts are served from spring-js-resources-{ver}.jar at -->
<!-- runtime. Therefore not available for static prototyping. See the         -->
<!-- layouts/standard.html template file for detail.                          -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->
</head>

<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- START of the content to be included in the execution result.  -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Only the markup inside this <body> would be required in this  -->
<!-- template if no static prototyping was intended.               -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<body tiles:fragment="content">
 
 	<div>
		<h5>
			<span class="alt" th:text="#{programarSolicitudes.consultarProgramacion}">Solicitudes a Programar</span>			 
			> 
			<span th:text="#{programarSolicitudes.programacion}" th:unless="${modoConsulta}">Programación de Solicitud</span>
			<span th:text="#{programarSolicitudes.consulta}" th:if="${modoConsulta}">Consulta de Programción</span>
		</h5>
		<hr />
		
		<h2>
			<p th:text="#{programarSolicitudes.titulo}">Información de Solicitud</p>
		</h2>

		<div>
		<form action="#" th:object="${solicitud}" th:action="${flowExecutionUrl}"
				method="post" class="inline">	   
		        <fieldset>			
				
				<div class="error" th:if="${flagErrorProgramacion}">
                  <span th:text="#{programarSolicitudes.errorProgramacion}">Error</span><br />
           	    </div>
           	    
           	    <div class="error" th:if="${flagErrorCruces}">
                  <span th:text="#{programarSolicitudes.errorCruces}">Error</span><br />
           	    </div>
				
					<div>
					<div class="span-8">
						<label th:text="#{programarSolicitudes.numero}">Número de Solicitud </label>
						<input type="text" th:field="*{id}" disabled="true"/>
					</div>
					<div class="span-8 last">
						<label th:text="#{programarSolicitudes.horas}">Total de horas estimadas </label>
						<input type="text" th:field="*{totalHorasEstimadas}" disabled="true"/>
					</div>
					<div class="span-8">
						<label th:text="#{programarSolicitudes.cliente}">Cliente </label>
						<input type="text" th:field="*{solicitante.cliente.razonSocial}" disabled="true"/>
					</div>
					<div class="span-8 last">
						<label th:text="#{programarSolicitudes.fechaEntrega}">Fecha solicitada de entrega </label>
						<input type="text" th:value="${#dates.format(solicitud.fechaEsperada, #messages.msg('date.format'))}" disabled="true"/>
						<script type="text/javascript">
                            // <![CDATA[
                            Spring.addDecoration(new Spring.ElementDecoration({
                                elementId : "fechaEsperada",
                                widgetType : "dijit.form.DateTextBox",
                                widgetAttrs : { datePattern : "dd-MM-yyyy", required : true }}));
                            // ]]>
                        </script>
					</div>
					<div class="span-8">
						<label th:text="#{programarSolicitudes.tipoRequerimiento}">Tipo de requerimiento </label>
						<input type="text" th:field="*{tipoRequerimiento.nombre}" disabled="true"/>
					</div>
					<div class="span-8 last">
						<label th:text="#{programarSolicitudes.fechaRegistro}" >Fecha de registro</label>
						<input type="text" th:value="${#dates.format(solicitud.fechaRegistro, #messages.msg('date.format'))}" disabled="true" />
						<script type="text/javascript">
                            // <![CDATA[
                            Spring.addDecoration(new Spring.ElementDecoration({
                                elementId : "fechaRegistro",
                                widgetType : "dijit.form.DateTextBox",
                                widgetAttrs : { datePattern : "dd-MM-yyyy", required : true }}));
                            // ]]>
                        </script>
					</div>					
					<div th:if="${solicitud.comentariosReprogramacion}" class="span-16 last">
					<p>
								<span th:text="#{programarSolicitudes.observaciones}">La solicitud presenta observaciones: </span><br/>
								<textarea class="span-16" th:field="*{comentariosReprogramacion}" disabled="disabled"/><br/>
					</p>
					</div>										
					</div>								
				</fieldset>
				</form>
				
				<div id="tabs">
				  <ul>
				    <li th:each="fase : ${solicitud.fases}"><a href="#tabs-1" th:href="'#'+ ${fase.id}" th:text="${fase.nombre}">Fase X</a></li>				      
				  </ul>
				  <div th:each="fase : ${solicitud.fases}">	
					 <div th:id="${fase.id}" class="container">		
						<div class="span-8">
							<label th:text="#{programarSolicitudes.horasFase}">Total de horas estimadas </label>
							<label th:text="${fase.esfuerzoEstimado}">30</label>
							<br/>
							<label th:text="#{programarSolicitudes.horasFaseProgramadas}">Total de horas programadas </label>
							<label th:text="${fase.horasProgramadas}">0</label>
							<br/>
							<label th:text="#{programarSolicitudes.cantidadRecursos}">Recursos utilizados: </label>
							<label th:text="${fase.recursosUtilizados}">2</label>
							<br/>
						</div>
						<div class=" success span-8 last">
							<label th:text="#{programarSolicitudes.competenciaFase}" >Competencias Relacionadas</label>
						 <ul>
						    <li th:each="competencia : ${fase.competencias}" th:text= "${competencia.nombre}" >Fase X</li>				      
						 </ul>						 
						</div>
						<div class= "span-17">
						
						<h3><p th:text="#{programarSolicitudes.recursosDisponibles}">Recursos disponibles</p></h3>							
						
							<table class="summary" >
						        <thead>
						            <tr>
						                <th th:text="#{programarSolicitudes.recursos.nombre}">Nombre</th>
						                <th th:text="#{programarSolicitudes.recursos.fechaDisponibilidad}">Fecha de Disponibilidad</th>
						                <th th:text="#{programarSolicitudes.recursos.accion}" >Acción</th>
						            </tr>
						        </thead>
						        <tbody>
						            <tr th:each="operador : ${fase.recursosDisponibles}">
						                <td th:text="${operador.nombre}">Pepito</td>
						                <td th:text="${#dates.format(operador.fechaDisponibilidad, #messages.msg('date.formatFull'))}">Inmediata</td>						                
 										<td><a class="button positive" href="#" th:href="@{'/programarOperador/' + ${fase.id} + '/' + ${operador.id}}">Programar</a></td>						                
						            </tr>
						            <tr th:if="${fase.recursosDisponibles.isEmpty()}">
						                <td colspan="5" th:text="#{programarSolicitudes.noResultados}">No se encontraron recursos aptos</td>
						            </tr>
						        </tbody>
						    </table>
						</div>
						<div class= "span-17">
						
						<h3><p th:text="#{programarSolicitudes.programacionesRealizadas}">Programaciones realizadas</p></h3>							
						
							<table class="summary" >
						        <thead>
						            <tr>
						                <th th:text="#{programarSolicitudes.programaciones.fase}">Fase</th>
						                <th th:text="#{programarSolicitudes.programaciones.recurso}">Nombre de Recurso</th>
						                <th th:text="#{programarSolicitudes.programaciones.fechaInicio}">Fecha de Inicio</th>
						                <th th:text="#{programarSolicitudes.programaciones.fechaFin}">Fecha de Fin</th>
						                <th th:text="#{programarSolicitudes.programaciones.horas}" >Horas</th>
						                <th th:text="#{programarSolicitudes.programaciones.Cruce}" >Cruce</th>
						                <th th:text="#{programarSolicitudes.programaciones.accion}" >Acción</th>
						            </tr>
						        </thead>
						        <tbody>
						            <tr th:each="horario, stat : ${fase.horarios}">
						                <td th:classappend="${horario.tieneCruce}? 'removed'" th:text="${fase.nombre}">Desarrollo</td>
						                <td th:classappend="${horario.tieneCruce}? 'removed'" th:text="${horario.operador.nombre}">Pepito</td>
						                <td th:classappend="${horario.tieneCruce}? 'removed'" th:text="${horario.fechaInicio}">10/10/13</td>
						                <td th:classappend="${horario.tieneCruce}? 'removed'" th:text="${horario.fechaFin}">10/10/13</td>
						                <td th:classappend="${horario.tieneCruce}? 'removed'" th:text="${horario.horasTotal}">8</td>	
						               	<td class="removed" th:if="${horario.tieneCruce}"><img th:src="@{/resources/static/images/miniWarning.gif}" alt=""/></td>
						               	<td th:unless="${horario.tieneCruce}"></td>		                
						                <td th:classappend="${horario.tieneCruce}? 'removed'" th:unless="${horario.fase.fechaInicio} and ${horario.fase.solicitud.flagProgramado}">
						                <form action="#" th:action="@{'/eliminarHorario/' + ${horario.id}}" th:method="'delete'">
					                        <button type="submit" class="button negative">Eliminar</button>
					                    </form>
						                </td>
						                <td th:classappend="${horario.tieneCruce}? 'removed'" th:if="${horario.fase.fechaInicio} and ${horario.fase.solicitud.flagProgramado}"/>						                
						            </tr>
						            <tr th:if="${fase.horarios.isEmpty()}">
						                <td colspan="7" th:text="#{programarSolicitudes.programaciones.noResultados}">No se encontraron programaciones</td>
						            </tr>
						        </tbody>
						    </table>
						</div>						
					  </div>
				  </div>		
				</div>											
				
		</div>
		<form action="#" th:object="${fechas}" th:action="@{/registrarSolicitud}"
				method="post">
                  <span th:text="${fechas}">titulo</span><br />

		
		</form>
		
		
				<div th:unless="${modoConsulta}">	
				<form action="#" th:action="@{/revisarProgramacion}" method="get">	
				<input type="hidden"  th:value="${solicitud.id}" name="idSolicitud" />
				<script th:inline="javascript">
				//<![CDATA[
				  $(function() {
				    $( "#cancelar" ).dialog({
				      autoOpen: false,
				      resizable: false,
				      height:200,
				      width: 350,
				      modal: true,
				      buttons: {
				        "Si": function() {
				        	window.location = /*[[@{/realizarProgramacion}]]*/ };

				        },
				        "No": function() {
				          $( this ).dialog( "close" );
				        }
				      }
				    });
				    $( "#openerCancelar" ).click(function() {
				        $( "#cancelar" ).dialog( "open" );
				      });
				  });
				//]]>
				  </script>
				  <div id="cancelar" th:title="#{programarSolicitudes.cancelarTitulo}">
					<p th:text="#{programarSolicitudes.cancelar}" >Todas las programaciones ingresadas serán canceladas. ¿Esta seguro?</p>
				  </div>						
											
 				<button type="submit" th:value="#{programarSolicitudes.botonRegistrar}">Registrar programacion</button>
 				
 				<button type="button" id="openerCancelar" th:value="#{general.cancelar}">Cancelar</button>
 				</form>			  	 		 					   		  	 							
				</div>
				<div th:if="${modoConsulta}">			
				<form th:action="@{/consultarProgramacion}" >
					<button type="submit" th:value="#{programarSolicitudes.botonVolver}">Volver</button>
				</form>								
				</div> 
	</div>
</body>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- END of the content to be included in the execution result -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

</html>
